<template>
  <div>
    <v-form-designer ref="vfDesigner">
      <template #customToolButtons>
        <el-button type="text" @click="showDialog"><i class="el-icon-finished" />保存</el-button>
      </template>
    </v-form-designer>

    <el-dialog
      title="提交"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="formData" ref="vForm" :rules="rules" label-position="right" label-width="100px" size="medium"
               @submit.native.prevent>
        <el-form-item label="表单名称" prop="name">
          <el-input v-model="formData.name" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="表单标识符" prop="formKey">
          <el-input v-model="formData.formKey" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="数据表名" prop="tableName">
          <el-input v-model="formData.tableName" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="表单描述" prop="remark">
          <el-input v-model="formData.remark" type="text" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveFormJson">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addForm, editForm } from '@/api/form/vform'
export default {
  name: 'VForm',
  data() {
    return {
      dialogVisible: false,
      formData: {
        name: '',
        remark: '',
        formKey: '',
        tableName: ''
      },
      rules: {
        name: [{
          required: true,
          message: '表单名称不可为空'
        }],
        formKey: [{
          required: true,
          message: '表单标识符不可为空'
        }, {
          pattern: /^[A-Za-z]+$/,
          trigger: ['blur', 'change'],
          message: '标识符只能填入英文字母'
        }],
      },
      routeParams: {},
      isEdit: false
    }
  },
  created() {
  },
  mounted() {
    // 判断是否有参数传入
    if(Object.getOwnPropertyNames(this.$route.params).length > 1) {
      this.$refs.vfDesigner.setFormJson(this.$route.params.data.vform)
      this.isEdit = true
    }
  },
  beforeDestroy() {
    // 清空表单
    this.$refs.vfDesigner.clearDesigner()
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
      if(this.isEdit) {
        const { name, remark, formKey, tableName} = this.$route.params.data
        this.formData = {name, remark, formKey, tableName}
        console.log(this.formData)
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    saveFormJson() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
        let formJson = this.$refs.vfDesigner.getFormJson()
        let params = {
          vform: JSON.stringify(formJson),
          ...this.formData
        }
        this.isEdit ? this.editForm({...params, id: this.$route.params.data.id}) : this.addForm(params)
      })
    },
    addForm(params) {
      addForm(params).then(res => {
        if(res.code === 200) {
          this.$refs.vfDesigner.clearDesigner()
          this.dialogVisible = false
          this.$refs['vForm'].resetFields()
        }
        this.$message({
          type: 'success',
          message: res.msg
        })
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    editForm(params) {
      editForm(params).then(res => {
        if(res.code === 200) {
          this.$refs.vfDesigner.clearDesigner()
          this.dialogVisible = false
          this.$refs['vForm'].resetFields()
          this.isEdit = false
        }
        this.$message({
          type: 'success',
          message: res.msg
        })
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#app {
  .app-main {
    .main-container {
      margin-left: 0;
      /deep/ .main-header{
        display: none;
      }
      /deep/ .el-container {
        .center-layout-container {
          .toolbar-header {
            padding: 0 10px;
            .toolbar-container {
              .left-toolbar {
                .el-button--text {
                  padding: 0 ;
                }
              }
              .el-button {
                padding: 0 15px;
              }
              .right-toolbar {
                float: none;
                width: auto !important;
                .el-button--text {
                  padding: 0 6px;
                }
              }

            }
          }
        }

      }
    }

  }
}
</style>
<style></style>
